<template>
  <div>
    <div class="color_box">
      <div class="one">一级</div>
      <div class="two">二级</div>
      <div class="three">三级</div>
    </div>
    <div>{{ drag ? '拖拽中' : '拖拽停止' }}</div>
    <!--使用draggable组件-->
    <draggable
      v-model="list"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group style="min-height: 6px; display: inline-block; width: 100%">
        <div
          class="item"
          v-for="(element, index) in list"
          :key="index + 9"
        >
          <span class="one"> {{ element.name }} =========一级 </span>
          <draggable
            v-model="element.list"
            chosenClass="chosen"
            forceFallback="true"
            animation="50"
            group="people"
            @start="onStart"
            @end="onEnd"
          >
            <transition-group style="min-height: 6px; display: inline-block; width: 100%">
              <div
                class="item"
                v-for="(e, i) in element.list"
                :key="i + 999"
              >
                <span class="two"> {{ e.name }} =========二级 </span>

                <draggable
                  v-model="e.list"
                  chosenClass="chosen"
                  forceFallback="true"
                  animation="50"
                  group="people"
                  @start="onStart"
                  @end="onEnd"
                >
                  <transition-group style="min-height: 6px; display: inline-block; width: 100%">
                    <div
                      class="item"
                      v-for="(eA, iA) in e.list"
                      :key="iA + 999"
                    >
                      <span class="three"> {{ eA.name }} =========三级 </span>
                    </div>
                  </transition-group>
                </draggable>
              </div>
            </transition-group>
          </draggable>
        </div>
      </transition-group>
    </draggable>

    <div
      class="btn"
      @click="clickBtn"
    >按钮</div>
  </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
  //注册draggable组件
  components: {
    draggable
  },
  data() {
    return {
      drag: false,
      //定义要被拖拽对象的数组
      list: [
        {
          people: 'cn',
          id: 1,
          name: '小白',
          list: [
            {
              people: 'cn',
              id: 2,
              name: '小白1',
              list: []
            },
            {
              people: 'cn',
              id: 3,
              name: '小白2',
              list: [
                {
                  people: 'cn',
                  id: 4,
                  name: '小白33',
                  list: []
                },
                {
                  people: 'cn',
                  id: 5,
                  name: '小白33',
                  list: []
                },
                {
                  people: 'cn',
                  id: 6,
                  name: '小白33',
                  list: []
                }
              ]
            }
          ]
        },
        {
          people: 'cn',
          id: 7,
          name: '小红',
          list: [
            {
              people: 'cn',
              id: 8,
              name: '小红1',
              list: []
            },
            {
              people: 'cn',
              id: 9,
              name: '小红2',
              list: []
            }
          ]
        },
        {
          people: 'cn',
          id: 10,
          name: '小绿',
          list: [
            {
              people: 'cn',
              id: 11,
              name: '小绿1',
              list: []
            },
            {
              people: 'cn',
              id: 12,
              name: '小绿2',
              list: []
            }
          ]
        },
        {
          people: 'us',
          id: 13,
          name: '小粉',
          list: [
            {
              people: 'us',
              id: 14,
              name: '小粉1',
              list: []
            },
            {
              people: 'us',
              id: 15,
              name: '小粉2',
              list: []
            }
          ]
        }
      ]
    }
  },
  methods: {
    //开始拖拽事件
    onStart() {
      this.drag = true
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false
    },
    clickBtn() {
      console.log(this.list)
    }
  }
}
</script>

<style lang="scss" scoped>
/*被拖拽对象的样式*/
.color_box {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
  .one {
    background-color: #f56c6c;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
  .two {
    background-color: #67c23a;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
  .three {
    background-color: #e6a23c;
    width: 150px;
    height: 50px;
    margin-right: 24px;
    color: #fdfdfd;
  }
}
.item {
  cursor: move;
  margin-left: 24px;

  & > span {
    padding: 6px;
    background-color: #fdfdfd;
    border: solid 1px #eee;
    display: inline-block;
    margin: 6px 0;
    margin-left: 24px;
  }
  .one {
    background-color: #f56c6c;
  }
  .two {
    background-color: #67c23a;
  }
  .three {
    background-color: #e6a23c;
  }
}

/*选中样式*/
.chosen {
  border: solid 1px #3089dc !important;
}
</style>
